import React from "react";
import {
  Form,
  Input,
  Button,
  Toast
} from 'antd-mobile'
import { useNavigate } from "umi";
import axios from '@/utils/request'
export default function index() {
  const navigate = useNavigate();
  const userLogin = (params: {userName: string,pwd:string}) => {
    axios.post('/user/username/register', params).then(res => {
      if (res.data.code === 0) {
        Toast.show({
          content: '注册成功',
          afterClose: () => {
            navigate('/login', {replace: true})
          }
        })
      }
      
    })
  }
  return (
    <div>
      <Form
        onFinish={userLogin}
        footer={
          <>
            <Button block type="submit" color="primary" size="large">
              提交
            </Button>
            <Button block type="reset" color="warning" size="large">
              重置
            </Button>
            <Button block color="danger" size="large" onClick={
              () => {
                navigate('/login')
              }
            }>
              直接登录
            </Button>
          </>
        }
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: "姓名不能为空" }]}
        >
          <Input  placeholder="请输入用户名名" />
        </Form.Item>
        <Form.Item
          name="pwd"
          label="密码"
          rules={[{ required: true, message: "密码" }]}
        >
          <Input placeholder="请输入密码" type="password" />
        </Form.Item>
      </Form>
    </div>
  );
}
